<template>
    <div id="app">
        <el-container>
            <el-header style= " line-height:50px;">
                <el-row :gutter="20">
                    <el-col :span="4" v-if="name != '未登录？请登录'">
                        <el-image fit="fit" src="/avatar/avatar1.jpg" style="width:50px;height:50px;padding-top: 5px;"></el-image>
                        <span style="padding-top:20px"> 用户:{{name}}</span>
                    </el-col>
                    <el-col :span="4" v-if="name == '未登录？请登录'">
                        <span style="padding-top:20px" @click="backLogin"> 用户:{{name}}</span>
                    </el-col>
                    <el-col :span="2" :offset="11">
                        <el-badge :value="shoppingCartNum" class="item" :hidden="isHidden">
                            <router-link to="/customer/shoppingCart"><el-button size="large" icon="el-icon-shopping-cart-1">购物车</el-button></router-link>
                        </el-badge>
                    </el-col>
                    <el-col :span="2">
                        <el-badge class="item">
                            <router-link to="/customer/toBePaid"><el-button size="large" icon="el-icon-goods">待支付</el-button></router-link>
                        </el-badge>
                    </el-col>
                    <el-col :span="2">
                        <el-badge class="item">
                            <router-link to="/customer/order"><el-button size="large" icon="el-icon-tickets">订单</el-button></router-link>
                        </el-badge>
                    </el-col>
                    <el-col :span="2">
                        <el-badge class="item">
                            <router-link to="/customer/person"><el-button size="large" icon="el-icon-s-custom">个人主页</el-button></router-link>
                        </el-badge>
                    </el-col>
                </el-row>
            </el-header>
            <router-view></router-view>
        </el-container>
    </div>
</template>
<script>
import {getUser, getShoppingCartNum} from '@/utils/modules/customer.js'

export default {
    mounted() {
        this.init()
        this.getShoppingCartNum()
    },
    data() {
        return {
            name:'未登录？请登录',
            shoppingCartNum:0,
            isHidden:true
        }
    },
    methods:{
        init(){
            getUser().then(res=>{
                console.log(res.data.username)
                this.name = res.data.username
            }).catch(err=>{
                console.log(err)
                this.$message({
                    type:'error',
                    message:err.message,
                    showClose:true
                })
            })
        },
        getShoppingCartNum(){
            getShoppingCartNum().then(res=>{
                this.shoppingCartNum = res.data
                if(this.shoppingCartNum > 0){
                    this.isHidden = false
                }
            }).catch(err=>{
                this.$message({
                    type:'error',
                    message:err.message,
                    showClose:true
                })
            })
        },
        backLogin(){
            this.$router.push({
                path:'/login'
            })
        }
    }
}
</script>
<style>
#app {
    background-color: #333;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

</style>